<template>
    <div class="default-layout-wrapper">
        <el-container class="layout-container-box">
            <el-header class="layout-header-box">
                <Header>
                    <template #centerContent>
                        <Menus />
                    </template>
                </Header>
            </el-header>
            <el-container>
                <el-main class="layout-content-box">
                    <router-view v-slot="{ Component }">
                        <keep-alive>
                            <component
                                :is="Component"
                                v-if="route.meta.isKeepAlive"
                                :key="route.fullPath"
                            />
                        </keep-alive>
                        <component
                            :is="Component"
                            :key="route.fullPath"
                            v-if="!route.meta.isKeepAlive"
                        />
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import Header from "../header/header.vue";
import Menus from "../menus/menus.vue";
const route = useRoute();
</script>

<style lang="scss" scoped>
.default-layout-wrapper {
    height: 100%;
    .layout-container-box {
        height: 100%;
        .layout-header-box {
            padding: 0 20px;
            margin-bottom: 3px;
            background-color: var(--main-body-bg-color);
        }
        .layout-content-box {
            height: 100%;
            padding: 10px;
            border: 1px solid #eee;
            background-color: #fff;
        }
    }
}
</style>
